<template>
  <div class="pt-content" :class="{'pt-content-inner':inner,'pt-content-no-top':!title && !$slots.title && !$slots.top && !$slots.search}" style="padding: 0">
    <div class="pt-content-top" v-if="$slots.top">
      <slot name="top"></slot>
    </div>
    <Divider v-if="divider" style="margin: 10px 0"></Divider>
    <div class="pt-content-wrap" :style="{marginTop:divider ? 0 : ''}">
      <div class="search-wrapper" v-if="$slots.search">
        <slot name="search"></slot>
      </div>
      <template>
        <slot name="content"></slot>
      </template>
      <!-- <template v-else>
        <NoData :loading="loading" :noDataText="noDataText"></NoData>
      </template> -->
    </div>
    <slot></slot>
  </div>
</template>
<script>
import NoData from '@/components/common/no-data';
export default {
    name: 'ColPage',
    components: { NoData },
    props: {
        title:{
          type: String,
          default: ''
        },
        loading: {
            type: Boolean,
            default: false
        },
        noDataText: {
            type: String,
            default: '暂无数据'
        },
        divider: {
            type: Boolean,
            default: false
        },
        menu:{
          type: Boolean,
          default: false
        },
        inner:{
          type: Boolean,
          default: false
        }
    },
    computed: {
        menuList() {
            // return this.$store.state.menuListLevel3;
        }
    },
    data() {
        return {};
    },
    mounted(){
      // console.log(this.$slots.search)
    },
    methods: {}
};
</script>
<style scoped>
.title{
  height: 28px;
  font-weight: 700;
  color: #2d2d2d;
  font-size: 20px;
  flex: none;
  align-self: flex-start;
}
.pt-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* background-color: #fff; */
  border-radius: 10px;
  padding: 0 !important;
  flex: auto;
  /* height: 0; */
  /*overflow: auto;*/
}
.pt-content.hp100 {
  height: 100%;
}
.pt-content.inner-page {
  margin-top: 20px;
  padding: 20px !important;
  background: var(--card-body-bgcolor);
}
.pt-content.inner-page h1 {
  font-size: 24px;
  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  font-weight: bold;
  color: var(--url-color);
}
.pt-content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 10px; */
  /* padding: 20px 20px 0; */
  /* border-bottom: 1px solid #eee; */
}
.pt-content-wrap {
  flex:auto;
  position: relative;
  /* height: 100%; */
  margin: 20px 0 0 0;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  /* padding-right: 2px;
  padding-top: 8px; */
  /* position: relative;
  top: -8px; */
}
.flex-center {
  display: flex;
  justify-content: center;
}
.search-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  justify-content: flex-end;
  align-items: center;
}
.pt-content-top .search-wrapper {
  margin-bottom: 0;
}
.search-wrapper > * {
  margin-bottom: 2px;
  margin-left: 10px !important;
  margin-right: 0 !important;
}
.search-wrapper > .ivu-select {
  width: 150px !important;
}
.search-wrapper > .ivu-input-wrapper {
  width: 180px !important;
}
.search-wrapper /deep/ .ivu-btn,
.pt-content-top /deep/ .ivu-btn,
.pt-content-top /deep/ .ivu-input,
.pt-content-top /deep/ .ivu-input-number,
.search-wrapper /deep/ .ivu-input,
.search-wrapper /deep/ .ivu-input-number,
.search-wrapper /deep/ .ivu-select-selection,
.pt-content-top /deep/ .ivu-select-selection {
  border-radius: 3px;
}

.search-wrapper .ivu-checkbox-wrapper {
  margin-right: 0;
  width: auto!important;
}
.pt-content.pt-content-no-top > .pt-content-top {
  display: none;
} 
.pt-content.pt-content-no-top > .pt-content-wrap {
  padding-bottom: 0px;
}
/* 菜单页 */
/* .pt-content.pt-content-menu {
  background-color: #fff;
  border-radius: 8px;
  height: calc(100% - 60px);
  margin:30px;
}
.pt-content-menu > .pt-content-top{
  padding:20px 20px 0;
}
.pt-content-menu > .pt-content-wrap {
  padding:0 20px 20px;
}
.pt-content-menu /deep/ .cardList{
  flex:auto;
  overflow: auto;
} */
/* 菜单页 */
.pt-content-inner{
  height:100%;
}
</style>
